Skip to main content

Vue - Chicken Music App

项目简介​

  • 基于Vue.js的音乐 Web App，部署在阿里云ECS服务器.

  • 实现了一个仿 QQ 音乐的 Vue.js 的 Web 应用，部署在阿里云服务器上，包括推荐、搜索、音乐播放和歌手等页面。开发了scroll, slider, header, loading 等公共组件。 – 使用了 Axios/Node.js 代理后端请求，从 QQ 音乐 (PC 端) 获取歌曲和数据。

  • Music Web App that imitates QQ music, built with Vue.js/Node.js and deployed on Alibaba Cloud Server.

  • Implemented a Vue.js Web App that imitates QQ music and deployed on Alibaba Cloud Server that includes Recommendation, Search, Music Player, Trending, Singer pages.

  • Used Axios + Node.js to proxy backend requests to capture songs and data from QQ Music (PC side).

  • Designed several common components of Vue.js, including scroll, slider, header, index list, loading.

前端​

  • Vue：用于构建用户界面的 MVVM 框架。它的核心是响应的数据绑定和组系统件
  • vue-router：为单页面应用提供的路由系统，项目上线前使用了 Lazy Loading Routes 技术来实现异步加载优化性能
  • vuex：Vue 集中状态管理，在多个组件共享某些状态时非常便捷
  • vue-lazyload：第三方图片懒加载库，优化页面加载速度
  • better-scroll：iscroll 的优化版，使移动端滑动体验更加流畅
  • Sass(Scss)：css 预编译处理器
  • ES6：ECMAScript 新一代语法，模块化、解构赋值、Promise、Class 等方法非常好用

后端​

  • Node.js：利用 Express 起一个本地测试服务器
  • jsonp：服务端通讯。抓取 QQ音乐(移动端)数据
  • axios：服务端通讯。结合 Node.js 代理后端请求，抓取 QQ音乐(PC端)数据